<template>
  <div class="search-top-search">
    <div class="left-box">
      <p-row :gutter="16">
        <p-col :span="6">
          <div class="item">
            <span class="item-left">姓名</span>
            <div class="item-right">
              <p-input v-model="form.name" placeholder="请输入"></p-input>
            </div>
          </div>
        </p-col>
        <p-col :span="6">
          <div class="item">
            <span class="item-left">状态</span>
            <p-select
              class="item-right"
              :value="form.contactStatus"
              placeholder="请选择"
              :get-popup-container="triggerNode => triggerNode.parentNode || document.body"
              @change="handleChange($event, 'contactStatus')"
            >
              <p-select-option
                v-for="item in contactStatusList"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </p-select-option>
            </p-select>
          </div>
        </p-col>
        <p-col :span="6">
          <div class="item">
            <span class="item-left">职级</span>
            <p-select
              class="item-right"
              :value="form.rankCode"
              placeholder="请选择"
              :get-popup-container="triggerNode => triggerNode.parentNode || document.body"
              @change="handleChange($event, 'rankCode')"
            >
              <p-select-option
                v-for="item in rankCodeOptions"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </p-select-option>
            </p-select>
          </div>
        </p-col>
        <p-col :span="6">
          <div class="item">
            <span class="item-left">电话</span>
            <div class="item-right">
              <p-input v-model="form.tel" placeholder="请输入"></p-input>
            </div>
          </div>
        </p-col>
      </p-row>
    </div>
    <div class="right-box">
      <p-button
        class="btn"
        type="primary"
        @click="searchTableList"
      >
        搜索
      </p-button>
      <p-button class="btn" @click="resForm">重置</p-button>
    </div>
  </div>
</template>

<script>
import { getDicList } from '@/api/public';

const defaultForm = {
  name: '', // 姓名
  contactStatus: '', // 状态
  rankCode: '', // 职级
  tel: '', // 联系电话
};
const all = { label: '全部', value: '' };
export default {
  components: {
  },
  data() {
    return {
      form: {
        name: '', // 姓名
        contactStatus: '', // 状态
        rankCode: '', // 职级
        tel: '', // 联系电话
      },
      contactStatusList: [
        {
          label: '正常',
          value: '1'
        },
        {
          label: '冻结',
          value: '2'
        }
      ],
      rankCodeOptions: [], // 职级
    };
  },
  computed: {
    getSearchParams() {
      return {
        ...this.form,
      };
    },
  },
  created() {
    this.getRankCodeList();
  },
  methods: {
    async selectList(code) {
      const result = await getDicList(code);
      return result?.data?.data || [];
    },
    // 职级List
    async getRankCodeList() {
      const result = await this.selectList('rank_code');
      this.rankCodeOptions = result;
    },
    // 选中值
    handleChange(val, key) {
      this.form[key] = val;
      console.log(this.form);
    },
    async searchTableList() {
      this.$emit('search');
    },

    resForm() {
      this.form = { ...defaultForm };
      this.$emit('search', true);
    },
  },
};
</script>

<style lang="less" scope>

.search-top-search {
  display: flex;
  // padding: 10px 20px;
  width: 100%;
  background: #fff;
  // border: 1px solid #e5e6e9;
  margin-bottom: 10px;
  .left-box {
    flex: 6;
    .item {
      display: flex;
      align-items: center;
      .item-left {
        width: 70px;
        padding-right: 8px;
        text-align: end;
      }
      .item-right {
        flex: 3;
      }
    }
  }
  .right-box {
    flex: 1;
    display: flex;
    flex-direction: row;
    margin-left: 20px;
    .btn {
      margin-right: 8px;
    }
  }
}
</style>
